<template>
    <el-container>
        <!-- 左侧 -->
      <el-aside>
        <img src="../assets/logo.png">
        <img src="../assets/1.png">
        <p class="imgTitle">欢迎使用CRM系统</p>
      </el-aside>
      <!-- 右侧 -->
      <el-main>
        <div class="loginTitle">欢迎登陆</div>
        <!-- 表单 -->
        <el-form ref="loginRefForm" :model="user" label-width="20%" :rules="loginRules">
            <!-- 账号 -->
            <el-form-item label="账号:" prop="loginAct">
                <el-input v-model="user.loginAct" @keydown.enter="login()"/>
            </el-form-item>

            <!-- 密码 -->
            <el-form-item label="密码:" prop="loginPwd">
                <el-input type="password" v-model="user.loginPwd" @keydown.enter="login()"/>
            </el-form-item>

            <!-- 记住密码 -->
            <el-form-item>
                <el-checkbox label="记住我" v-model="user.rememberMe" name="rememberMe" />
            </el-form-item>
            <!-- 登录按钮 -->
            <el-form-item>
                <el-button type="primary" @click="login()" :plain="true">登录</el-button>
            </el-form-item>
            
        </el-form>
      </el-main>
    </el-container>
</template>

<script>
import { getTokenName, messageTip, removeToken, later } from "../util/util.js"
import { doPost,doGet } from '../http/httpRequest.js';
export default {
    name : "LoginView",
    data(){
        return {
            user : {
                loginAct : "",
                loginPwd : "",
                rememberMe : false
            },
            // 定义登录表单的验证规则
            loginRules : {
                // 账号验证规则
                loginAct : [
                    { required: true, message: '请输入登录账号', trigger: 'blur' },
                    { min: 3, max: 15, message: '账号长度不合法', trigger: 'blur' },
                ],
                // 密码验证规则
                loginPwd : [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 18, message: '密码长度不合法', trigger: 'blur' },
                ]
            }
        }
    },
    mounted(){
        this.freeLogin();
    },
    methods : {
        freeLogin(){
            // 免登录
            let token = window.localStorage.getItem(getTokenName());
            if(token){
                // token有值显然是上次点了记住我
                doGet("/api/login/free",{}).then(resp => {
                    if(resp.data.code === 200){
                        // token验证通过
                        messageTip('登陆成功,欢迎回来',"success");
                        later("/dashboard");
                    }
                });
            }
        },
        // 将页面上的函数在此定义
        login(){
            // 提交前要验证合法性
            this.$refs.loginRefForm.validate((isValid) => {
                // isValid是验证后回传的结果,true为通过
                if(isValid){
                    // 验证通过,可以提交
                    let formData = new FormData();
                    // 可以视为map,是json对象
                    // 内部以键值对形式提交数据给后台
                    formData.append("loginAct",this.user.loginAct);
                    formData.append("loginPwd",this.user.loginPwd);
                    formData.append("rememberMe",this.user.rememberMe);
                    // 不要用对象传,用formData传递数据
                    doPost("/api/login",formData).then((resp) => {
                        if(resp.status === 200){
                            messageTip('登陆成功,即将跳转到主页',"success");
                            // 删除一下历史Token
                            removeToken();
                            // 存储jwt
                            if(this.user.rememberMe === true){
                                window.localStorage.setItem(getTokenName(),resp.data.data);
                            }
                            else{
                                window.sessionStorage.setItem(getTokenName(),resp.data.data);
                            }
                            later("/dashboard");
                        }
                        else{
                            messageTip('登陆失败,请检查您的信息',"error");
                        }
                    });
                }
            });
        }
    }
}
</script>

<style scoped>
.el-aside {
    background: black;
    width: 40%;
    text-align: center;
}
.imgTitle {
    color: white;
    font-size: 28px;
    font-weight: bold;
}
.el-aside img {
    height: 30%;
}
.el-main {
    width: 60%;
    /* 使用JS实现铺满 */
    /* 设置为100%屏幕高度 */
    height: calc(100vh);
}
.el-form {
    width: 60%;
    margin: auto;
}
.loginTitle{
    text-align: center;
    margin-top: 10%;
    margin-bottom: 5%;
    font-size: 30px;
    font-weight: bold;
}
.el-button{
    width: 100%;
}
</style>